<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            /*以html视口(view port)为参照物，紧贴四个边，实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            bottom:0;
            left:0;
            right:0;
        }
    </style>
</head>
<body>
 <div class="mask"></div>
 <div>
    <!-- lorem*60 -->
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet autem blanditiis cupiditate debitis
         eligendi excepturi facere fugit ipsa laboriosam, laudantium, magnam minima officia quibusdam repellat sequi sit
         tenetur voluptatibus.
     </div>
     <div>Aliquid cumque cupiditate debitis id iusto nostrum sunt vel. Ab at aut, commodi error fugit harum impedit
         ipsam maxime natus neque nobis nulla odio odit quia recusandae rem voluptatem voluptates?
     </div>
     <div>Aliquam aliquid blanditiis, dignissimos doloremque doloribus eius facere facilis impedit incidunt inventore
         ipsa ipsam ipsum molestiae natus nostrum officia optio, praesentium provident quam qui, reiciendis saepe soluta
         temporibus veritatis vitae?
     </div>
     <div>Animi aut consequuntur, dolorem doloremque ducimus eligendi esse et explicabo libero maiores nemo nostrum,
         nulla optio pariatur porro quae rerum sequi sunt voluptate voluptatibus. Dolores eveniet nostrum officia
         temporibus velit!
     </div>
     <div>Consequatur, earum eveniet ex expedita minus quaerat quo! Accusantium, aperiam asperiores blanditiis commodi
         consequuntur culpa debitis expedita ipsam labore libero mollitia obcaecati pariatur repellendus repudiandae
         sunt tenetur voluptatibus! Quam, quisquam.
     </div>
     <div>Blanditiis fugit iste iusto necessitatibus obcaecati quo quod voluptates! Asperiores dicta ipsum non nostrum,
         numquam repellat rerum soluta. Blanditiis dolores ipsum magnam natus obcaecati officiis vero, voluptate! Ab,
         commodi eum?
     </div>
     <div>A blanditiis consectetur delectus distinctio doloribus ea et fugit incidunt laboriosam nam nostrum obcaecati
         officia provident quibusdam quidem quisquam recusandae sed, similique sit suscipit tempore vel velit vero?
         Accusantium, saepe?
     </div>
     <div>Ad amet consectetur nulla soluta veniam! Ab accusantium deleniti distinctio ducimus facere facilis fuga fugiat
         laborum magnam maxime nesciunt officia perspiciatis quo quos ratione repellendus sequi temporibus ullam
         voluptate, voluptates?
     </div>
     <div>Ad at atque, eos explicabo fuga inventore molestiae natus ratione. Ab eum explicabo, illo mollitia obcaecati
         porro similique? Eum molestias nobis quo recusandae! Fugit harum minima nostrum! Esse, quas quibusdam?
     </div>
     <div>Beatae distinctio dolore ipsa maiores veniam! Ab deserunt distinctio dolor, doloremque ea enim ex excepturi
         fugit impedit ipsa libero minus modi mollitia nostrum omnis praesentium quis reiciendis, soluta tempora vitae!
     </div>
     <div>Cupiditate ipsam iure qui voluptates. Aliquam amet aspernatur at consequuntur dignissimos distinctio dolore
         excepturi iure maxime neque nisi, nostrum odit perferendis provident quae quod reiciendis repellat repellendus
         tempore, tenetur, vitae.
     </div>
     <div>Atque consequatur nesciunt obcaecati perspiciatis quis repudiandae sapiente? Aliquam commodi cum dolore
         doloremque dolorum eveniet ex iste mollitia, necessitatibus nihil omnis porro quas quis quos sapiente soluta,
         totam veniam voluptates.
     </div>
     <div>Architecto at ipsum odio quae voluptatibus. Alias architecto at consequatur cum deleniti dolor, dolore
         doloribus ea eaque eos excepturi molestiae nemo nulla officia placeat porro praesentium quaerat rem
         repellendus, voluptatibus.
     </div>
     <div>Aspernatur blanditiis consequuntur cupiditate debitis doloremque ducimus earum eum, exercitationem fugit illum
         iusto, laudantium nihil nisi possimus praesentium quas qui reprehenderit suscipit vitae, voluptatum?
         Accusantium deserunt dolores ex numquam sed.
     </div>
     <div>Ab asperiores blanditiis consequatur dolore doloremque dolores dolorum eaque, earum illum iste itaque laborum,
         laudantium modi nulla perspiciatis reprehenderit sunt velit vitae voluptas voluptatibus. Asperiores excepturi
         libero officia porro qui?
     </div>
     <div>Accusamus accusantium aspernatur aut commodi distinctio dolor dolore ea earum, enim eos eveniet exercitationem
         harum illum libero necessitatibus nemo nihil non odit placeat possimus quia reiciendis sapiente soluta sunt
         veritatis.
     </div>
     <div>Ab aliquid assumenda consequuntur facere fuga laboriosam laudantium libero natus nemo omnis, praesentium
         provident quaerat quam quasi reprehenderit saepe, sapiente soluta tempora tenetur voluptate? Asperiores
         cupiditate quae quis repellendus sed.
     </div>
     <div>A corporis, dolores doloribus eligendi, error eum facere in itaque minus nulla provident quae quod repellendus
         sit tempora temporibus, tenetur ut. Est id ipsa nesciunt quam rem repellat suscipit tempore.
     </div>
     <div>Adipisci animi aperiam architecto aspernatur atque consequatur cum dolor eveniet facere id in incidunt
         inventore magnam minima nihil non odit perferendis possimus quae quas quasi, quibusdam, repellat sequi
         temporibus velit.
     </div>
     <div>Amet assumenda at corporis doloribus et fuga fugiat iure labore, magnam, mollitia necessitatibus nihil non
         odit possimus quam quo quod reiciendis, soluta totam voluptatem! Animi delectus dignissimos itaque quis rerum.
     </div>
     <div>A animi assumenda commodi cumque deleniti dolor est fuga fugit, in laudantium magnam modi nesciunt nostrum
         odit omnis quam quibusdam quo recusandae sed similique sit sunt tempora tenetur veniam voluptates.
     </div>
     <div>Adipisci aspernatur aut commodi deleniti dicta eaque enim excepturi facere fugiat ipsa iste, minima minus modi
         nesciunt nulla numquam officiis optio perferendis provident quos rem suscipit temporibus ullam velit veritatis!
     </div>
     <div>Ab deserunt iste minima nesciunt nihil numquam. Asperiores atque autem cumque cupiditate deleniti dolor
         dolores excepturi facere harum, inventore, laborum odit officia officiis placeat quaerat, quos recusandae
         repudiandae rerum suscipit.
     </div>
     <div>Amet ducimus eaque facere inventore laborum qui reiciendis reprehenderit saepe unde velit? Adipisci asperiores
         dicta incidunt minus nobis, sint temporibus? Accusamus corporis dolores quaerat repellat sapiente sequi
         temporibus vel veniam.
     </div>
     <div>Eos excepturi explicabo fuga libero molestias, non obcaecati officiis tenetur voluptates. Aliquam aspernatur
         commodi, ducimus eum fugiat impedit natus nemo quaerat rem repellat sapiente, soluta? Alias cum perferendis
         praesentium tempore.
     </div>
     <div>Aut dignissimos fugit in nesciunt non, quos similique velit? Accusamus consectetur dicta est fugiat hic ipsum
         iusto maxime, non officia pariatur quidem ratione reprehenderit sed, sit unde velit veniam vero?
     </div>
     <div>Aperiam architecto consequatur odit perspiciatis quae qui rerum. Architecto assumenda autem consequatur
         delectus fuga hic illo maiores maxime molestiae, nemo neque obcaecati possimus quasi quidem recusandae
         repellendus sunt tempore voluptates!
     </div>
     <div>Ducimus eum inventore laboriosam omnis, porro quod totam! Ab at aut beatae, corporis fugit impedit itaque
         minima minus neque nobis perferendis porro provident quibusdam reprehenderit sequi tenetur totam ut vel.
     </div>
     <div>Autem cum cumque dicta doloribus eligendi eos exercitationem expedita fugit incidunt, libero magnam modi
         molestiae odio officiis pariatur provident reiciendis repellat, sapiente sit totam! Dignissimos ea
         necessitatibus numquam quia sint?
     </div>
     <div>Accusamus consectetur deleniti dignissimos doloribus enim eveniet ex facere ipsam magnam natus odit, placeat
         quae quam quos similique ullam veniam! Ad, atque magni maiores modi mollitia placeat rem sed veniam!
     </div>
     <div>A aliquam assumenda blanditiis, culpa doloribus eaque eligendi exercitationem expedita hic inventore iusto
         laborum modi odit officia quo reiciendis ut veniam! Numquam, quo, ut? Atque laborum nisi obcaecati quam unde.
     </div>
     <div>Asperiores, at autem, blanditiis, dolorum eius est id minus molestiae mollitia necessitatibus nihil
         perferendis reprehenderit vero voluptatem voluptatum! Culpa debitis dolore itaque libero sapiente sed tempora.
         Fuga nobis quia repellendus.
     </div>
     <div>Accusantium aliquam asperiores corporis cum dolore doloribus eum expedita facere iusto labore, laborum minima
         mollitia nam natus odio, officia officiis perferendis quaerat quia repudiandae rerum sit velit voluptatum.
         Earum, natus.
     </div>
     <div>Ad amet animi consequuntur cum debitis dolores eius est facilis fuga harum hic illum impedit ipsum iure
         laudantium libero maxime, natus necessitatibus odio pariatur, perferendis quia reprehenderit sapiente unde
         vitae.
     </div>
     <div>Ad adipisci cupiditate eaque error fugiat iste, labore laboriosam laudantium magnam provident quis quo quod,
         rem sapiente, sint ullam vitae voluptates. Accusamus aliquid et excepturi hic quas, repudiandae saepe sed.
     </div>
     <div>Accusantium corporis dolore doloremque dolorum et eveniet, ex explicabo impedit ipsam libero maxime molestiae
         nisi, perferendis, possimus quae quia quidem recusandae reprehenderit repudiandae sed soluta totam unde
         voluptate voluptates voluptatibus!
     </div>
     <div>Asperiores at consequatur cumque, dolore doloribus earum eum fugiat hic id illo iure laudantium molestias
         nihil obcaecati officia omnis quas reiciendis sapiente totam veritatis! Architecto dolores iste officia quas
         vero.
     </div>
     <div>A ab doloremque eius facere fuga harum illo inventore ipsam iste, iusto laboriosam, laborum magnam omnis quam
         qui quis recusandae sed sequi tempore unde. Corporis expedita molestias neque numquam quibusdam.
     </div>
     <div>Amet consequuntur culpa, debitis eligendi eveniet fugiat ipsam neque possimus quam quis quisquam reiciendis
         repellendus, reprehenderit voluptate voluptates. Animi cupiditate est excepturi in laudantium modi, neque nobis
         numquam quos velit!
     </div>
     <div>Ab, amet at autem dicta dolorum earum inventore laudantium molestiae numquam odit quos reiciendis repudiandae
         sequi sit suscipit! Accusantium ad dolorem perferendis sint veniam, voluptas! A animi facere laboriosam nemo.
     </div>
     <div>Assumenda laboriosam, ratione. Consequatur eaque esse magni maiores molestiae quod sint vitae voluptatem?
         Facilis id officia ullam. Architecto explicabo quam reiciendis? Amet beatae doloribus fugiat ipsam laboriosam
         sapiente sit vero?
     </div>
     <div>Ab animi aspernatur at beatae debitis deleniti deserunt dolores facilis harum libero magni modi molestias
         nostrum numquam perspiciatis possimus praesentium, quo recusandae repellat reprehenderit sed sequi sint tempora
         temporibus voluptatum.
     </div>
     <div>Alias animi asperiores commodi delectus itaque modi provident quaerat temporibus. Alias amet animi aspernatur
         atque beatae consectetur cumque, debitis doloremque dolorum inventore, iste itaque perspiciatis quasi qui
         recusandae similique ullam.
     </div>
     <div>A alias atque autem cum cumque deleniti doloremque ducimus eum hic in, minima necessitatibus neque nesciunt
         odit quisquam recusandae sequi veniam. Delectus dolor dolorum illo impedit odit placeat quae voluptates.
     </div>
     <div>Aperiam consectetur delectus deserunt dolore doloremque, eum excepturi fugiat reiciendis. Ad commodi esse est
         hic nam, officiis quod recusandae! A animi dolore libero non nulla obcaecati omnis quod ut velit.
     </div>
     <div>Doloremque ea eaque excepturi facere fuga harum hic impedit incidunt ipsum laborum laudantium magni molestiae
         nesciunt nobis officia, repudiandae voluptatem! Consequatur dolore earum ex ipsam maxime numquam omnis placeat,
         tempore!
     </div>
     <div>A aut et in quas totam. Ad aspernatur blanditiis debitis dicta doloribus eum fugiat id illum iste iure labore
         libero maxime nam, odit, ratione sapiente, soluta sunt temporibus totam vitae!
     </div>
     <div>Eaque earum et explicabo, laudantium nisi recusandae veritatis. Asperiores commodi eos harum minima nulla
         reiciendis repellendus unde voluptate! A alias debitis distinctio doloremque ipsa modi optio rem, sunt tempore
         temporibus!
     </div>
     <div>Accusantium architecto aut blanditiis culpa dicta, dolorem dolorum ducimus fugiat ipsum itaque labore libero
         modi molestiae molestias obcaecati officiis optio pariatur porro quas, qui quia sit ut velit voluptates
         voluptatibus?
     </div>
     <div>Id minima nam porro quis similique, voluptatibus. Aperiam ducimus enim exercitationem iste voluptatum. Aperiam
         at dolorum ea ex ipsa laboriosam maiores, mollitia nemo nesciunt, nulla officia perferendis quod temporibus
         vero.
     </div>
     <div>Animi autem blanditiis cumque deleniti deserunt dignissimos dolores error ex id incidunt iste magni minima
         modi obcaecati officiis quas quis similique sint soluta tempora, ullam unde vel vitae voluptatem voluptates!
     </div>
     <div>Accusamus, aliquid blanditiis, cum cupiditate debitis dicta dolore dolorem earum enim exercitationem facere
         fugit hic id iure mollitia neque nihil omnis quasi quos sapiente tenetur veniam vitae! Aliquam, eius, illum.
     </div>
     <div>A animi ducimus excepturi expedita ipsam laboriosam, modi molestias neque obcaecati odit perferendis quas quo
         repudiandae sapiente unde ut velit? Deleniti earum error ex excepturi ipsa modi odio qui ullam.
     </div>
     <div>Alias earum esse eveniet fuga ipsa minima nemo praesentium sapiente! Blanditiis commodi cumque dolore
         doloribus eligendi, fugiat illo laboriosam magni, minus non obcaecati officiis perferendis qui repellat
         repudiandae, similique temporibus.
     </div>
     <div>Amet assumenda dolores et libero. Alias architecto beatae commodi consequuntur, eius, excepturi expedita
         fugiat fugit impedit inventore ipsa libero magnam maxime molestias nam non obcaecati omnis provident quis rem
         repellat.
     </div>
     <div>A amet deleniti dolorum maiores minus nesciunt, nisi obcaecati perferendis provident quisquam repellendus unde
         velit voluptatem. Amet asperiores consequatur eius enim est fuga nam nesciunt officiis reiciendis, repellat
         temporibus veniam!
     </div>
     <div>Adipisci aliquam blanditiis consequatur consequuntur, cupiditate dignissimos ducimus ea eos ex fuga illo iste
         magni nemo neque nisi, non nulla, odio officia perspiciatis qui quia quis rem repellendus tenetur voluptates!
     </div>
     <div>Accusantium aliquid aperiam culpa deserunt doloremque doloribus dolorum eaque excepturi facere, hic in ipsa
         natus odit optio praesentium quaerat quam ratione repellat reprehenderit soluta, tenetur vel velit voluptatum!
         Inventore, voluptate!
     </div>
     <div>Adipisci animi aperiam consectetur cum delectus distinctio id illo in iusto labore laboriosam magni maiores
         modi natus nemo nisi omnis quaerat quas qui recusandae, repellat sit ullam vel, veritatis vero?
     </div>
     <div>A alias aliquam assumenda at blanditiis consectetur debitis doloremque eligendi eveniet ipsa ipsum itaque,
         iure libero maiores minus nemo neque nisi odio officia placeat porro quaerat quam rem saepe sint!
     </div>
 </div>
</body>
</html>